<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: html(~{::title}, ~{::pageStyles}, '病历管理', ~{::#medical-records-content}, ~{::pageScripts})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 病历管理</title>
    
    <!-- 页面特定CSS -->
    <th:block th:fragment="pageStyles">
        <link rel="stylesheet" th:href="@{/css/pages/medical-records.css}">
    </th:block>
</head>
<body>
    <!-- 病历管理内容 -->
    <div id="medical-records-content">
        <!-- 操作区域 -->
        <div class="actions-bar">
            <button class="btn btn-primary" id="addRecordBtn">
                <span data-icon="plus"></span>
                添加病历
            </button>
            <div class="filters">
                <div class="search-box">
                    <input type="text" id="searchInput" placeholder="搜索患者姓名或ID...">
                    <button id="searchBtn">
                        <span data-icon="search"></span>
                    </button>
                </div>
                <select id="departmentFilter" class="filter-select">
                    <option value="">所有科室</option>
                    <option value="内科">内科</option>
                    <option value="外科">外科</option>
                    <option value="儿科">儿科</option>
                    <option value="妇产科">妇产科</option>
                    <option value="神经科">神经科</option>
                    <option value="精神科">精神科</option>
                    <option value="皮肤科">皮肤科</option>
                </select>
                <select id="timeRangeFilter" class="filter-select">
                    <option value="">所有时间</option>
                    <option value="today">今天</option>
                    <option value="week">本周</option>
                    <option value="month">本月</option>
                    <option value="year">今年</option>
                </select>
                <button class="btn btn-outline" id="exportBtn">
                    <span data-icon="export"></span>
                    导出
                </button>
            </div>
        </div>
        
        <!-- 病历表格 -->
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>病历ID</th>
                        <th>患者姓名</th>
                        <th>患者ID</th>
                        <th>主诊医生</th>
                        <th>科室</th>
                        <th>诊断结果</th>
                        <th>就诊日期</th>
                        <th>最后更新</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="medicalRecordsTableBody">
                    <!-- 表格数据由JS动态生成 -->
                </tbody>
            </table>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination">
            <button class="btn-icon pagination-btn" disabled>
                <span data-icon="chevron-left"></span>
            </button>
            <button class="pagination-number active">1</button>
            <button class="pagination-number">2</button>
            <button class="pagination-number">3</button>
            <span class="pagination-ellipsis">...</span>
            <button class="pagination-number">10</button>
            <button class="btn-icon pagination-btn">
                <span data-icon="chevron-right"></span>
            </button>
        </div>
    </div>
    
    <!-- 添加/编辑病历模态框 -->
    <div class="modal" id="recordModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">添加新病历</h2>
                <button class="close-btn">
                    <span data-icon="close"></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="recordForm">
                    <input type="hidden" id="recordId" name="recordId">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="patientSelect">选择患者</label>
                            <select id="patientSelect" name="patientId" required>
                                <option value="">请选择患者</option>
                                <!-- 患者列表由JS动态生成 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="doctorSelect">主诊医生</label>
                            <select id="doctorSelect" name="doctorId" required>
                                <option value="">请选择医生</option>
                                <!-- 医生列表由JS动态生成 -->
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="departmentSelect">科室</label>
                            <select id="departmentSelect" name="departmentId" required>
                                <option value="">请选择科室</option>
                                <option value="1">内科</option>
                                <option value="2">外科</option>
                                <option value="3">儿科</option>
                                <option value="4">妇产科</option>
                                <option value="5">神经科</option>
                                <option value="6">精神科</option>
                                <option value="7">皮肤科</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="visitDate">就诊日期</label>
                            <input type="date" id="visitDate" name="visitDate" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="symptoms">症状描述</label>
                        <textarea id="symptoms" name="symptoms" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="diagnosis">诊断结果</label>
                        <textarea id="diagnosis" name="diagnosis" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="treatment">治疗方案</label>
                        <textarea id="treatment" name="treatment" rows="3" required></textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="recordStatus">病历状态</label>
                            <select id="recordStatus" name="status" required>
                                <option value="DRAFT">草稿</option>
                                <option value="ACTIVE">有效</option>
                                <option value="ARCHIVED">已归档</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="followUpDate">随访日期</label>
                            <input type="date" id="followUpDate" name="followUpDate">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="notes">备注</label>
                        <textarea id="notes" name="notes" rows="2"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancelRecord">取消</button>
                <button class="btn btn-primary" id="saveRecord">保存</button>
            </div>
        </div>
    </div>
    
    <!-- 查看病历详情模态框 -->
    <div class="modal" id="viewRecordModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>病历详情</h2>
                <button class="close-btn">
                    <span data-icon="close"></span>
                </button>
            </div>
            <div class="modal-body">
                <div class="record-header">
                    <div class="record-id">
                        <span class="label">病历ID:</span>
                        <span id="viewRecordId" class="value"></span>
                    </div>
                    <div class="record-status" id="viewRecordStatus"></div>
                </div>
                
                <div class="record-section">
                    <h3>基本信息</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">患者姓名:</span>
                            <span id="viewPatientName" class="value"></span>
                        </div>
                        <div class="info-item">
                            <span class="label">患者ID:</span>
                            <span id="viewPatientId" class="value"></span>
                        </div>
                        <div class="info-item">
                            <span class="label">主诊医生:</span>
                            <span id="viewDoctorName" class="value"></span>
                        </div>
                        <div class="info-item">
                            <span class="label">科室:</span>
                            <span id="viewDepartment" class="value"></span>
                        </div>
                        <div class="info-item">
                            <span class="label">就诊日期:</span>
                            <span id="viewVisitDate" class="value"></span>
                        </div>
                        <div class="info-item">
                            <span class="label">随访日期:</span>
                            <span id="viewFollowUpDate" class="value"></span>
                        </div>
                    </div>
                </div>
                
                <div class="record-section">
                    <h3>症状描述</h3>
                    <div id="viewSymptoms" class="record-text"></div>
                </div>
                
                <div class="record-section">
                    <h3>诊断结果</h3>
                    <div id="viewDiagnosis" class="record-text"></div>
                </div>
                
                <div class="record-section">
                    <h3>治疗方案</h3>
                    <div id="viewTreatment" class="record-text"></div>
                </div>
                
                <div class="record-section">
                    <h3>备注</h3>
                    <div id="viewNotes" class="record-text"></div>
                </div>
                
                <div class="record-footer">
                    <div class="record-timestamps">
                        <div class="timestamp">
                            <span class="label">创建时间:</span>
                            <span id="viewCreateTime" class="value"></span>
                        </div>
                        <div class="timestamp">
                            <span class="label">更新时间:</span>
                            <span id="viewUpdateTime" class="value"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="printRecord">
                    <span data-icon="print"></span>
                    打印
                </button>
                <button class="btn btn-primary" id="editRecord">
                    <span data-icon="edit"></span>
                    编辑
                </button>
            </div>
        </div>
    </div>

    <!-- 页面特定脚本 -->
    <th:block th:fragment="pageScripts">
        <script th:src="@{/js/utils/modal.js}"></script>
        <script th:src="@{/js/pages/medical-records.js}"></script>
    </th:block>
</body>
</html> 